/*
 * @Description: 优惠券、客服、设置列表
 * @Author: ziwei.ma
 * @Date: 2019-06-21 14:05:00
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-06-27 16:59:40
 */

<template>
  <div class="setup-list-warpper flex-v">
    <component
      class="setup-list"
      :class="[option.IS_MARGIN?'is-margin':'xb_border ddd border-style']"
      v-for="(option, index) in setupList"
      :key="index"
      :is="getCompnents(option.TYPE)"
      :option="option"
    >
    </component>
  </div>
</template>

<script>
import ItemConponsVue from './ItemConpons.vue'
import ItemCusServiceVue from './ItemCusService.vue'
import ItemUrlVue from './ItemUrl.vue'
export default {
  components: {
    'item-conpons': ItemConponsVue,
    'item-cusservice': ItemCusServiceVue,
    'item-url': ItemUrlVue
  },
  data() {
    return {
      firstList: 0,
      componentsList: ['item-url', 'item-conpons', 'item-cusservice']
    }
  },
  props: {
    setupList: '' // 由父组件传回的配置列表
  },
  methods: {
    getCompnents(type) {
      switch (type) {
        case 'URL':
          return this.componentsList[0]
        case 'COUPON':
          return this.componentsList[1]
        case 'CUSTOMER_SERVICE':
          return this.componentsList[2]
      }
    }
  }
}
</script>

<style scoped>
.setup-list-warpper {
  width: 750px;
}
.setup-list {
  height: 110px;
  padding: 0 30px;
  background-color: #fff;
}
.is-margin {
  margin-top: 20px;
}
.border-style:before {
  width: 690px;
  left: 30px;
}
</style>
